<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
		
			body{
				font-size: 12px;
				/*background-color: red;*/
			}
			
			input{
				padding: 0px;
				margin-right: 0px;
			}
			.cal{
				background-color: white;
				width:250px;
				border-collapse: collapse;
				border: 1px solid black;
			}
			
			.cal td{
				height: 25px;
				padding: 0px;
			}
			
			.cal_header{
				width: 100%;
				height: 100%;
				background-color: #41A9CC;
				color: white;
				text-align: center;
			}
			
			/** 蓝底白字**/
			.cal label{
				background-color: #41A9CC;
				color: white;
				padding: 3px 7px;
				
				/** 指针为手型**/
				cursor: pointer;
			}
			
			/*移动到元素上面就使用这个样式*/
			.cal label:hover{
				color: blue;
				
			}
			
			.cal_xingqi{
				width: 100%;
				text-align: center;
				/**表格的两边框合并为一条  如果可能，边框会合并为一个单一的边框。会忽略border-spacing 和 empty-cells 属性。**/
				border-collapse: collapse;
				/*font-weight: bold;*/
			}
			
			.bg_light_blue{
				height: 30px;
				background-color: #D0F0F0;
			}
			
			.cal span{
				
				padding: 5px;
				cursor: pointer;
				
				/** 宽度一样的关键代码**/
				width: 20px;
				display: block;
				
				/*带有边框*/
				/*border: 1px solid white;*/
			}
			
			.cal span:hover{
				background-color: #41A9CC;
				border-radius: 3px 3px 3px 3px;
				
				/*带有边框*/
				/*border-color: red;*/
			}
			
			/** 不是本月的灰色 **/
			.not_current_month{
				color: gray;
			}
			
			.current_month{
				color: red;
			}
			
			._bottom{
				width: 100%;
			}
			
			.input_width{
				width:80px;
			}
			
		</style>
	</head>
	<body>
		<div>
			<table class="cal">
				<tr>
					<td>
						<table class="cal_header">
							<tr>
								<td>&lt;</td>
								<td>2016年3月</td>
								<td>&gt;</td>
							</tr>
						</table>

					</td>
				</tr>
				<tr>
					<td>
						<table class="cal_xingqi">
							<thead>
							<tr class="bg_light_blue">
								<th>日</th>
								<th>一</th>
								<th>二</th>
								<th>三</th>
								<th>四</th>
								<th>五</th>
								<th>六</th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<td class="not_current_month"><span>28</span></td>
								<td class="not_current_month"><span>29</span></td>
								<td><span>1</span></td>
								<td><span>2</span></td>
								<td><span>3</span></td>
								<td><span>4</span></td>
								<td><span>5</span></td>
							</tr>
							<tr>
								<td><span>6</span></td>
								<td><span>7</span></td>
								<td><span>8</span></td>
								<td><span>9</span></td>
								<td><span>10</span></td>
								<td><span>11</span></td>
								<td><span>12</span></td>
							</tr>
							<tr>
								<td><span>13</span></td>
								<td><span>14</span></td>
								<td><span>15</span></td>
								<td><span>16</span></td>
								<td><span>17</span></td>
								<td><span>18</span></td>
								<td><span>19</span></td>
							</tr>
							<tr>
								<td><span>20</td>
								<td class="current_month"><span>21</span></td>
								<td><span>22</span></td>
								<td><span>23</span></td>
								<td><span>24</span></td>
								<td><span>25</span></td>
								<td><span>26</span></td>
							</tr>
							<tr>
								<td><span>27</span></td>
								<td><span>28</span></td>
								<td><span>29</span></td>
								<td><span>30</span></td>
								<td><span>31</span></td>
								<td class="not_current_month"><span>1</span></td>
								<td class="not_current_month"><span>2</span></td>
							</tr>
							</tbody>
						</table>
					</td>
				</tr>

				<tr>
					<td>
						<table class="_bottom">
							<tr>
								<td><label>今天</label></td>
								<td><label>清除</label></td>
								<td style="text-align: right;"><input class="input_width"></td>
								<td><label>GO</label></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
